<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>群打卡活动</title>
		<!-- elementUI css -->
  		<link rel="stylesheet" href="/unpkg/lib-master/theme-chalk/index.css"> 
		<link rel="stylesheet" href="css/public.css">
		<style type="text/css">
			html {
				background-color: #F1F3F4;
			}

			.title {
				background-color: #FFFFFF;
				height: 40px;
				line-height: 40px;
				padding: 0 20px;
				display: flex;
				justify-content: space-between;
			}

			.person {
				margin-top: 5px;
				background-color: #F1F3F4;
				height: 30px;
				line-height: 30px;
				padding: 0 5px;
			}

			.box {
				padding: 10px 20px;
			}

			.btn-input {
				display: flex;
				justify-content: space-between;

			}

			.input {
				width: 70%;
			}

			.box-card {
				margin-top: 10px;
			}

			.is-leaf {
				text-align: center !important;
			}

			td {
				text-align: center !important;
			}

			.el-button+.el-button {
				margin-left: 0 !important;
			}

			.box-title {
				text-align: center;
				font-size: 16px;
			}

			.box-cont {
				display: flex;
				margin: 10px 0;
			}

			.way1 {
				width: 47%;
				display: flex;
				flex-direction: column;
			}

			.way1 img {
				width: 100px;
				height: 100px;
			}

			.way2 {
				width: 53%;
				display: flex;
				flex-direction: column;
			}

			.link-cont {
				border: 1px solid #DCDFE6;
				padding: 10px;
			}

			.box-btn {
				text-align: end;
			}
		</style>

	</head>

	<body>
		<div id="app">
			<div class="title">
				<div>群打卡活动</div>
				<!-- <div class="person"> -->
				<!-- <span>公众号</span> -->
				<!-- <span>:</span> -->
				<!-- <span>@</span> -->
				<!-- <span>!{!{lists[0].name}}</span> -->
				<!-- </div> -->
			</div>
			<div class="box">
				<div class="btn-input">
					<a href="create.html">
						<el-button size="small" type="primary">创建打卡活动</el-button>
					</a>
					<div>
						<el-input class="input" v-model="activeNames" placeholder="请输入活动名称搜索"></el-input>
						<el-button @click="onsearch">搜索</el-button>
					</div>
				</div>
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<el-tabs v-model="activeName" @tab-click="handleClick">
							<el-tab-pane label="全部" name="all"></el-tab-pane>
							<el-tab-pane label="进行中" name="1"></el-tab-pane>
							<el-tab-pane label="未开始" name="2"></el-tab-pane>
							<el-tab-pane label="已结束" name="3"></el-tab-pane>
						</el-tabs>
						<el-table :data="lists" style="width: 100%">
							<el-table-column prop="name" label="打卡活动名称">
							</el-table-column>
							<!-- <el-table-column prop="behavior_tag" label="客户标签">
							</el-table-column> -->
							<!-- <el-table-column prop="enterprise_name" label="创建人">
							</el-table-column> -->
							<el-table-column prop="type" label="类型">
								<template slot-scope="scope">
									<span v-if="scope.row.type == 1">连续打卡</span>
									<span v-if="scope.row.type == 2">累计打卡</span>
								</template>
							</el-table-column>
							<el-table-column prop="nvg_day" label="平均打卡天数">
							</el-table-column>
							<el-table-column prop="total_people" label="总打卡人数">
							</el-table-column>
							<el-table-column prop="ctime" label="创建时间">
							</el-table-column>
							<el-table-column prop="activeTime" label="活动时间">
								<template slot-scope="scope">
									<span v-if="scope.row.expiration_type == 1">永久有效</span>
									<span v-if="scope.row.expiration_type == 2">!{!{ scope.row.start_date }} ~ !{!{ scope.row.expiration_date }}</span>
								</template>
							</el-table-column>
							<el-table-column prop="status_name" label="状态">
							</el-table-column>
							<el-table-column label="操作" width="280">
								<template slot-scope="scope">
									<el-button size="mini" round @click="goDetail(scope.row.id)">详情</el-button>
									<el-button size="mini" round @click="shareData(scope.row.id)">分享</el-button>
									<el-button size="mini" round @click="goEdit(scope.row.id)">编辑</el-button>
									<a href="list.html"><el-button size="mini" round @click="deleList">删除</el-button></a>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination
						  background
						  layout="prev, pager, next"
						  @current-change="currentPage"
						  :total="total">
						</el-pagination>
					</div>
				</el-card>
			</div>
			<el-dialog :visible.sync="shareBox" width="25%">
				<div class="box-title"><strong>分享</strong></div>
				<div class="box-cont">
					<div class="way1">
						<span>方式一</span>
						<span>群打卡二维码</span>
						<img :src="share_qrcode">
					</div>
					<div class="way2">
						<span>方式一</span>
						<span>群打卡链接</span>
						<div class="link-cont">
							<span>
								!{!{ share_url }}
							</span>
						</div>
					</div>
				</div>
				<div class="box-btn">
					<el-button size="small" @click="dowmQrcode()">下载二维码</el-button>
					<el-button size="small" type="primary">复制打卡链接</el-button>
				</div>
			</el-dialog>
		</div>
		<script src="/unpkg/unpkg.vue.js"></script>
		<script src="/cdn/qs.min9.js"></script>
		<script src="/unpkg/lib-master/index.js"></script>
		<script src="/unpkg/unpkg.axios.min.js"></script>


		<script type="text/javascript">
			var myapp = new Vue({
				el: '#app',
				data() {
					return {
						activeNames:'',
						requestData: {
							status: null,
							paged: 1,
						},
						lists: [],
						activeName: 'all',
						shareBox: false,
						total: 0,
						share_qrcode: '',
						share_url: '',
					}
				},
				mounted() {
					this.activeList() //初始群打卡列表
				},
				// headers: {
				// 				'Content-Type': 'application/x-www-form-urlencoded'
				// 			},
				methods: {
					shareData(id){
						this.shareBox = true
						let t = this;
						axios.get('/Addons/GroupClock/Admin/GroupClock/share_clock.html?id='+id)
							.then(function(res) {
								console.log(res)
								if (res.data.status == "success") {
									t.share_qrcode = res.data.data.qr_code;
									t.share_url = res.data.data.url;
								}
							})
					},
					activeList() {
						let t = this;
						console.log('开始');
						axios.post('/Addons/GroupClock/Admin/GroupClock/index.html', Qs.stringify(t
							.requestData), {
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
							})
							.then(function(res) {
								console.log(res)
								if (res.data.status == "success") {
									t.lists = res.data.data.items;
									t.total = res.data.data.count;
								}
							})
					},
					handleClick(tab) {
						this.requestData.status = tab.name
						console.log(tab);
						this.activeList();
						this.$message.success('获取成功')
					},
					deleList() {
						let t = this;
						axios.post('/Addons/GroupClock/Admin/GroupClock/delete.html?id=1', Qs.stringify(t.requestData), {
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
						})
					},
					onsearch(){
						this.requestData.name = this.activeNames
						this.activeList()
					},
					goDetail(id){
                        window.location.href = 'detail.html?id='+ id
                    },
					goEdit(id){
						window.location.href = 'edit.html?id='+ id
					},
					currentPage(page){
						this.requestData.paged = page
						this.activeList()
					}
				},
			})
		</script>
	</body>

</html>
